<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>烟花</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        function FireWork(){
            // 元素选择;
            this.container = $("#box");
            this.bindEvent();  
        }
        FireWork.prototype.bindEvent = function(){
            var self = this;
           
            self.container.click(function( evt , data ){
                // 已知条件 : 两个参数 evt , data ；
                // 附加条件 : evt 无论是用户触发事件还是自定义触发事件都存在;
                // data 在用户触发事件时为 undefined , 在自定义触发事件的时候为对象;
                // 问我要确保 e 一定是有数据的对象那应该怎么办 ？ 
                // 用户触发的时候我么使用 evt , 自定义事件触发的时候我们使用data;

                var e =  data || evt ;
                // 1. 在用户触发事件的时候 , 返回的结果是 evt ;
                // 2. 在自定义事件触发的时候,返回的结果是 data;
                var fireWork = self.createFireWork();
                // 属性操作;
                fireWork.css({ 
                        left : e.offsetX 
                });
                $(fireWork).animate({
                    top : e.offsetY
                },800 , function(){
                    fireWork.remove();
                    self.boom( e.offsetX , e.offsetY);
                })
            })
        }
        FireWork.prototype.createFireWork = function(){
            // DOM结构创建;
            var div = $("<div class='ball'></div>")
            div.css({
                        backgroundColor : "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0")
                     });
            this.container.append(div);
            return div;
        }
        FireWork.prototype.boom = function( x , y ){
            // 角度
            var deg = 0;
            // 半径 (斜边)
            var r = 100;
            for(var i = 0 ; i < 20 ; i ++){
                var fire = this.createFireWork();
                // 属性操作;
                fire.css({
                      left : x , 
                      top  : y
                })
                deg += 18;
                var target_x = Math.round(Math.cos( Math.PI / 180 * deg ) * r);
                var target_y = Math.round(Math.sin( Math.PI / 180 * deg ) * r);

                $(fire).animate({
                    left : target_x + x , 
                    top  : target_y + y
                },function(){
                    // this 指向当前的DOM对象;
                    this.remove();
                })
            }            
        }
        FireWork.prototype.autoFire = function(){
            var self = this;
            setInterval(function(){
                  // 原生js的事件，直接调用 document.onclick = function(){};
                  // document.onclick();

                  // 在jQuery之中我们需要使用到的东西是事件的抛发;
                var data = {
                    offsetX : Math.round( Math.random() * self.container.width()) + 100,
                    offsetY : Math.round( Math.random() * self.container.height()) + 100
                };

                self.container.trigger("click" , [data]);
            }, 2000)
        }
        var fw = new FireWork();
    </script>
</html>
